<!DOCTYPE html>
<html>
<meta charset="UTF-8" />
<meta name="renderer" content="webkit">
<head>
<title>在线设备</title>
<link href="/vendor/bootstrap/css/bootstrap.css" type="text/css" rel="stylesheet">
<link href="/css/online-monitor-test.css" type="text/css" rel="stylesheet">
<script src="/vendor/jquery/jquery-1.10.2.min.js"></script>
<script src="/js/lib/vue/vue.min.js"></script>
<script src="/js/lib/mqttws31.js" type="text/javascript"></script>
</head>
<body>
	<!-- 数据展示 -->
	<div class="nav text-center">
		<h2>在线设备</h2>
	</div>
	<br />
	<div id="app1" class="container-fuil">
		<div class="my-main" v-for="(device,id) in devices">
			<div class="flot-div">
				<ul class="graph-container">
					<li>
						<div class="bar-wrapper">
							<div class="bar-container">
								<div class="bar-background"></div>
								<div id="process-w" class="bar-inner" h="68"
									v-bind:style="{ height: device.data.percent+'%',color: 'blue'}">{{device.data.percent}}%</div>
								<div class="bar-foreground"></div>
							</div>
						</div>
					</li>
					<li></li>
				</ul>
			</div>

			<div class="dev-info flot-div">
				<p>设备ID：{{id}}</p>
				<p>当前时间：{{dateFormat(device.timestamp)}}</p>
				<p>设备名称：{{device.data.deviceName}}</p>
				<p>设备类型：{{device.data.deviceType}}</p>
				<p>加工范围：{{device.data.area}}</p>
				<p>激光最大功率：{{device.data.power}}</p>
			</div>

		</div>
	</div>
</body>
<script src="/js/online-monitor-test.js" type="text/javascript"></script>
</html>